检测构建速度

最新的 easywebpack-cli@4.0.0 可以通过 easy build --speed 检测 Webpack 各 loader 和 plugin 处理耗时。

DLL 公共提取

Webpack 通过 **DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取,能极大大提升了构建的速度.**

只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。

module.exports = {
  dll:['vue','vuex','axios']
}

详细方案:Webpack DLL 工程化实现

开启 cache-loader 缓存编译

默认 babel-loaderts-loader 没有启用 thread-loadercache-loader 加速构建。当构建的 entry 太少时, 开启后,反而构建速度会慢一些,只有当项目足够大以后或者构建速度太慢,才建议开启,然后对比决定是否要开启该配置。

// webpack.config.js
module.exports = {
  compile:{
    thread: true, // 多进程编译
    cache: true   // 启动编译缓存
  }
}


要求:easywebpack4

Egg SSR 构建多进程编译

在 Egg SSR 项目中, 我们通过 egg-webpack 实现本地开发模式编译,早期版本需要在 Egg 项目的 config/config.local.js 配置 webpackConfigList 配置

const EasyWebpack = require('easywebpack-vue');
module.exports = {
  webpackConfigList: EasyWebpack.getWebpackConfig();
};

这种方式只会采用单进程编译模式,速度会慢一些, 我们可以通过去掉 webpackConfigList 配置即可开启 egg-webpack 开启多进程编译模式。 结合 DLL 公共提取cache-loader 缓存编译模式, 构建速度可以从 40s 减少到 10 s 以内。

Egg SSR Babel 构建优化

https://www.yuque.com/easy-team/ves/babel


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
React 项目构建 React 项目构建
Webpack  原始配置编写// webpack.config.js const easywebpack = require('easywebpack-react'); const webpack = easywebpack.webpack; const merge = easywebpack.merge; const env = process.env.BUILD_ENV; const baseWebpackConfig = easywebpack.getWebpackConfig...
2019-12-23 sky
Next 
PWA 支持 PWA 支持
service-worker 生成easywebpack 3.7.0 内置支持 service-worker.js 生成, 该功能是通过 service-worker-precache-webpack-plugin实现的。你可以通过如下方式开启, 默认禁用。//${app_root}/webpack.config.js module.exports = { plugins:{ serviceworker:true } } 开启后, easywebpack 会自动生成 service...
2019-12-23 sky